<template>
  <div>
    <div ref="foo">//通过ref获取dom
      <img :src="url" alt="">//盒子内为你需要复制的内容
      <p>盒子内为你需要复制的内容</p>
    </div>
    <el-button type="primary" @click="copy">一键复制</el-button>
    <el-button type="primary" @click="handleOk">复制信息</el-button>
  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      url:"https://bucket-zyj001.oss-cn-wulanchabu.aliyuncs.com/workplace/1676513833776142.png",
      logoImg:require('../../assets/1676513833776142.png'),
      logoImg1:require('../../assets/79926886.jpg')
    }
  },
  methods:{
    copy (e) {
      this.$nextTick(function () {//nextTick,当前dom渲染完毕的回调
        console.log('foo', this.$refs.foo)//打印获取的dom
        const selection = window.getSelection()
        const range = document.createRange()
        range.selectNode(this.$refs.foo)//传入dom
        selection.addRange(range)
        document.execCommand('copy')//copy是复制
        selection.removeAllRanges()/清除缓存
      })
    },
    handleOk(){
      console.log("handleOk",this.logoImg)
      // console.log(row) //接收需要传递的参数
      const obj1 = window.frames['copyFrame'] // 获得对应iframe的window对象
      // obj1.makeimg = "https://qingduanshi.oss-cn-beijing.aliyuncs.com/20230715102800680.png?timeStamp=Tue Jul 18 2023 22:45:02 GMT+0800 (中国标准时间)"   //传入图片地址
      // obj1.makeimg = "https://bucket-zyj001.oss-cn-wulanchabu.aliyuncs.com/workplace/1676513833776142.png"   //传入图片地址
      // obj1.makeimg = "this.logoImg"   //传入图片地址
      // obj1.makeimg1 = this.logoImg1   //传入图片地址
      obj1.domakeimg()  //执行复制函数
      this.$message.success('复制成功!')  //进行反馈
    }
  }
}
</script>

<style scoped>

</style>
